<template>
    <div class="allContainer">
        <div class="searchContainer">
            <span class="inputLabel">微服务</span>
            <el-select v-model="applicationData.dockerContainerId" placeholder="微服务" class="searchInfoInput" clearable>
                <el-option :label="item.dockerName" :value="item.dockerContainerId" v-for="item in containerList" :key="item.id"/>
            </el-select>

            <el-button type="primary" icon="SearchOutlined" class="searchButtonClass" :loading="searchLoading" @click="queryDeployLog()">查询部署日志</el-button>
        </div>
        <div class="deployStepContainer">
            <div class="stepHeaderContainer">
                <div class="stepInfoClass">
                    <component :is="step1ComponentIcon" :class="step1ComponentClass"/>
                    <span :class="step1SpanClass">构建</span>
                </div>
                <div class="stepSplitClass">
                    <component is="RightOutlined" class="stepSplitClassSpan"/>
                </div>
                <div class="stepInfoClass">
                    <component :is="step2ComponentIcon" :class="step2ComponentClass"/>
                    <span :class="step2SpanClass">推包</span>
                </div>
                <div class="stepSplitClass">
                    <component is="RightOutlined" class="stepSplitClassSpan"/>
                </div>
                <div class="stepInfoClass">
                    <component :is="step3ComponentIcon" :class="step3ComponentClass"/>
                    <span :class="step3SpanClass">实例部署</span>
                </div>
            </div>
            <div class="stepInfoContainer">
                <div class="stepInfoClass">
                    <el-card style="width: 100%">
                        <el-steps direction="vertical" :active="step1Active - 1" space="200px" finish-status="success">
                            <el-step title="代码仓拉取" :status="step1GitPullInfo ? (step1GitPullInfo.pipeLineStatus === 'ERROR' ? 'error' : '') : ''">
                                <template #description>
                                    <span v-if="step1GitPullInfo !== ''">启动时间：{{step1GitPullInfo.startTime}}</span>
                                    <br />
                                    <span v-if="step1GitPullInfo !== ''">拉取路径：{{step1GitPullInfo.gitPath}}</span>
                                    <br />
                                    <span v-if="step1GitPullInfo !== ''">结束时间：{{step1GitPullInfo.endTime}}</span>
                                    <br />
                                    <span v-if="step1GitPullInfo !== ''">执行内容：{{step1GitPullInfo.pipeLineResStr}}</span>
                                </template>
                            </el-step>
                            <el-step title="maven构建" :status="step1MavenBuildInfo ? (step1MavenBuildInfo.pipeLineStatus === 'ERROR' ? 'error' : '') : ''">
                                <template #description>
                                    <span v-if="step1MavenBuildInfo !== ''">启动时间：{{step1MavenBuildInfo.startTime}}</span>
                                    <br />
                                    <span v-if="step1MavenBuildInfo !== ''">构建路径：{{step1MavenBuildInfo.pomPath}}</span>
                                    <br />
                                    <span v-if="step1MavenBuildInfo !== ''">结束时间：{{step1MavenBuildInfo.endTime}}</span>
                                    <br />
                                    <span v-if="step1MavenBuildInfo !== ''">执行内容：</span>
                                    <br />
                                    <span v-if="step1MavenBuildInfo !== ''">
                                        <span v-if="step1MavenBuildInfo.pipeLineResStr" v-for="(value, index) in step1MavenBuildInfo.pipeLineResStr.split('\n')" :key="index">
                                            {{value}} <br />
                                        </span>
                                        <span v-if="!step1MavenBuildInfo.pipeLineResStr">

                                        </span>
                                    </span>
                                </template>
                            </el-step>
                        </el-steps>
                    </el-card>
                </div>
                <div class="stepSplitClass">
                </div>
                <div class="stepInfoClass">
                    <el-card style="width: 100%">
                        <el-steps direction="vertical" :active="step2Active - 1" space="200px" finish-status="success">
                            <el-step title="jar包推送" :status="step2PushJarInfo ? (step2PushJarInfo.pipeLineStatus === 'ERROR' ? 'error' : '') : ''">
                                <template #description>
                                    <span v-if="step2PushJarInfo !== ''">启动时间：{{step2PushJarInfo.startTime}}</span>
                                    <br />
                                    <span v-if="step2PushJarInfo !== ''">部署包名：{{step2PushJarInfo.pushJarName}}</span>
                                    <br />
                                    <span v-if="step2PushJarInfo !== ''">结束时间：{{step2PushJarInfo.endTime}}</span>
                                    <br />
                                    <span v-if="step2PushJarInfo !== ''">执行内容：{{step2PushJarInfo.pipeLineResStr}}</span>
                                </template>
                            </el-step>
                        </el-steps>
                    </el-card>
                </div>
                <div class="stepSplitClass">
                </div>
                <div class="stepInfoClass">
                    <el-card style="width: 100%">
                        <el-steps direction="vertical" :active="step3Active - 1" space="200px" finish-status="success">
                            <el-step title="实例部署" :status="step3DeployInfo ? (step3DeployInfo.pipeLineStatus === 'ERROR' ? 'error' : '') : ''">
                                <template #description>
                                    <span v-if="step3DeployInfo !== ''">启动时间：{{step3DeployInfo.startTime}}</span>
                                    <br />
                                    <span v-if="step3DeployInfo !== ''">实例名称：{{step3DeployInfo.dockerName}}</span>
                                    <br />
                                    <span v-if="step3DeployInfo !== ''">结束时间：{{step3DeployInfo.endTime}}</span>
                                    <br />
                                    <span v-if="step3DeployInfo !== ''">执行内容：{{step3DeployInfo.pipeLineResStr}}</span>
                                </template>
                            </el-step>
                        </el-steps>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {createTag} from "@/utils/tagCreate";
import {containerBuildStepInfo, containerInfoQuery} from "@/request/container";

export default {
    name: "ContainerPipelineManage",
    data() {
        return {
            applicationData: {
                dockerContainerId: ""
            },
            stepData: {},
            timer: null,
            containerList: [],
            searchLoading: false
        }
    },
    methods: {
        queryDeployLog() {
            this.searchLoading = true
            if (this.applicationData.dockerContainerId !== "") {
                containerBuildStepInfo(this.applicationData).then(res => {
                    if (!res.data) {
                        this.stepData = res.data;
                        return;
                    }
                    if (res.data.currentStep < 4) {
                        this.resetTimer();
                    }
                    this.stepData = res.data;
                    this.searchLoading = false;
                })
            }
        },
        resetTimer() {
            if (this.timer !== null) {
                return;
            }
            this.timer = setInterval(() => {
                if (this.applicationData.dockerContainerId !== "") {
                    containerBuildStepInfo(this.applicationData).then(res => {
                        if (!res.data) {
                            this.stepData = res.data;
                            return;
                        }
                        if (this.stepData.currentStep >= 4) {
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                        if (this.stepData.pipeLineStatus === "ERROR") {
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                        this.stepData = res.data;
                    })
                }
            }, 2000);
        }
    },
    computed: {
        step1ComponentClass() {
            if (!this.stepData) {
                return "stepInfoIconClassCommon";
            }
            if (this.stepData.currentStep === 1) {
                let stepDataMap = this.stepData;
                let step = stepDataMap.stepMap
                if (!step) {
                    return "stepInfoIconClassCommon";
                }
                if (step['1'].stepStatus === "ERROR") {
                    return "stepInfoIconClassError";
                } else {
                    return "stepInfoIconClassCurrent";
                }
            } else {
                if (this.stepData.currentStep > 1) {
                    return "stepInfoIconClassSuccess";
                } else {
                    return "stepInfoIconClassCommon";
                }
            }
        },
        step2ComponentClass() {
            if (!this.stepData) {
                return "stepInfoIconClassCommon";
            }
            if (this.stepData.currentStep === 2) {
                let stepDataMap = this.stepData;
                let step = stepDataMap.stepMap
                if (!step) {
                    return "stepInfoIconClassCommon";
                }
                if (step['2'].stepStatus === "ERROR") {
                    return "stepInfoIconClassError";
                } else {
                    return "stepInfoIconClassCurrent";
                }
            } else {
                if (this.stepData.currentStep > 2) {
                    return "stepInfoIconClassSuccess";
                } else {
                    return "stepInfoIconClassCommon";
                }
            }
        },
        step3ComponentClass() {
            if (!this.stepData) {
                return "stepInfoIconClassCommon";
            }
            if (this.stepData.currentStep === 3) {
                let stepDataMap = this.stepData;
                let step = stepDataMap.stepMap
                if (!step) {
                    return "stepInfoIconClassCommon";
                }
                if (step['3'].stepStatus === "ERROR") {
                    return "stepInfoIconClassError";
                } else {
                    return "stepInfoIconClassCurrent";
                }
            } else {
                if (this.stepData.currentStep > 3) {
                    return "stepInfoIconClassSuccess";
                } else {
                    return "stepInfoIconClassCommon";
                }
            }
        },
        step1SpanClass() {
            if (!this.stepData) {
                return "stepInfoSpanClassCommon";
            }
            if (this.stepData.currentStep === 1) {
                let stepDataMap = this.stepData;
                let step = stepDataMap.stepMap
                if (!step) {
                    return "stepInfoSpanClassCommon";
                }
                if (step['1'].stepStatus === "ERROR") {
                    return "stepInfoSpanClassError";
                } else {
                    return "stepInfoSpanClassCurrent";
                }
            } else {
                if (this.stepData.currentStep > 1) {
                    return "stepInfoSpanClassSuccess";
                } else {
                    return "stepInfoSpanClassCommon";
                }
            }
        },
        step2SpanClass() {
            if (!this.stepData) {
                return "stepInfoSpanClassCommon";
            }
            if (this.stepData.currentStep === 2) {
                let stepDataMap = this.stepData;
                let step = stepDataMap.stepMap
                if (!step) {
                    return "stepInfoSpanClassCommon";
                }
                if (step['2'].stepStatus === "ERROR") {
                    return "stepInfoSpanClassError";
                } else {
                    return "stepInfoSpanClassCurrent";
                }
            } else {
                if (this.stepData.currentStep > 2) {
                    return "stepInfoSpanClassSuccess";
                } else {
                    return "stepInfoSpanClassCommon";
                }
            }
        },
        step3SpanClass() {
            if (!this.stepData) {
                return "stepInfoSpanClassCommon";
            }
            if (this.stepData.currentStep === 3) {
                let stepDataMap = this.stepData;
                let step = stepDataMap.stepMap
                if (!step) {
                    return "stepInfoSpanClassCommon";
                }
                if (step['3'].stepStatus === "ERROR") {
                    return "stepInfoSpanClassError";
                } else {
                    return "stepInfoSpanClassCurrent";
                }
            } else {
                if (this.stepData.currentStep > 3) {
                    return "stepInfoSpanClassSuccess";
                } else {
                    return "stepInfoSpanClassCommon";
                }
            }
        },

        step1ComponentIcon() {
            if (!this.stepData) {
                return "ClockCircleOutlined";
            }
            if (this.stepData.currentStep === 1) {
                let stepDataMap = this.stepData;
                let step = stepDataMap.stepMap
                if (!step) {
                    return "ClockCircleOutlined";
                }
                if (step['1'].stepStatus === "ERROR") {
                    return "CloseCircleOutlined";
                } else {
                    return "LoadingOutlined";
                }
            } else {
                if (this.stepData.currentStep > 1) {
                    return "CheckCircleOutlined";
                } else {
                    return "ClockCircleOutlined";
                }
            }
        },
        step2ComponentIcon() {
            if (!this.stepData) {
                return "ClockCircleOutlined";
            }
            if (this.stepData.currentStep === 2) {
                let stepDataMap = this.stepData;
                let step = stepDataMap.stepMap
                if (!step) {
                    return "ClockCircleOutlined";
                }
                if (step['2'].stepStatus === "ERROR") {
                    return "CloseCircleOutlined";
                } else {
                    return "LoadingOutlined";
                }
            } else {
                if (this.stepData.currentStep > 2) {
                    return "CheckCircleOutlined";
                } else {
                    return "ClockCircleOutlined";
                }
            }
        },
        step3ComponentIcon() {
            if (!this.stepData) {
                return "ClockCircleOutlined";
            }
            if (this.stepData.currentStep === 3) {
                let stepDataMap = this.stepData;
                let step = stepDataMap.stepMap
                if (!step) {
                    return "ClockCircleOutlined";
                }
                if (step['3'].stepStatus === "ERROR") {
                    return "CloseCircleOutlined";
                } else {
                    return "LoadingOutlined";
                }
            } else {
                if (this.stepData.currentStep > 3) {
                    return "CheckCircleOutlined";
                } else {
                    return "ClockCircleOutlined";
                }
            }
        },

        step1GitPullInfo() {
            if (!this.stepData) {
                return {};
            }
            let stepDataMap = this.stepData;
            let step = stepDataMap.stepMap
            if (!step) {
                return {};
            }
            return step['1'].stepEntities[0];
        },
        step1MavenBuildInfo() {
            if (!this.stepData) {
                return {};
            }
            let stepDataMap = this.stepData;
            let step = stepDataMap.stepMap
            if (!step) {
                return {};
            }
            if (step['1'].stepEntities.length < 2) {
                return {};
            }
            return step['1'].stepEntities[1];
        },
        step2PushJarInfo() {
            if (!this.stepData) {
                return {};
            }
            let stepDataMap = this.stepData;
            let step = stepDataMap.stepMap
            if (!step) {
                return {};
            }
            if (!step['2']) {
                return {};
            }
            return step['2'].stepEntities[0];
        },
        step3DeployInfo() {
            if (!this.stepData) {
                return {};
            }
            let stepDataMap = this.stepData;
            let step = stepDataMap.stepMap
            if (!step) {
                return {};
            }
            if (!step['3']) {
                return {};
            }
            return step['3'].stepEntities[0];
        },

        step1Active() {
            if (!this.stepData) {
                return -1;
            }
            let stepDataMap = this.stepData;
            let step = stepDataMap.stepMap
            if (!step) {
                return -1;
            }
            return step['1'].currentSonStep;
        },
        step2Active() {
            if (!this.stepData) {
                return -1;
            }
            let stepDataMap = this.stepData;
            let step = stepDataMap.stepMap
            if (!step) {
                return -1;
            }
            if (!step['2']) {
                return -1;
            }
            if (!(step['2'].currentSonStep)) {
                return -1;
            }
            return step['2'].currentSonStep;
        },
        step3Active() {
            if (!this.stepData) {
                return -1;
            }
            let stepDataMap = this.stepData;
            let step = stepDataMap.stepMap
            if (!step) {
                return -1;
            }
            if (!step['3']) {
                return -1;
            }
            if (!(step['3'].currentSonStep)) {
                return -1;
            }
            return step['3'].currentSonStep;
        }
    },
    mounted() {
        createTag(this.$route, this.$store);
    },
    created() {
        containerInfoQuery({}).then(res => {
            if (res.code === '200') {
                this.containerList = res.data
            }
        });
    }
}
</script>

<style scoped lang="less">
.allContainer {
    width: 98%;
    height: 100%;
    margin: 1% 0.2%;
    overflow-y: scroll;
    .searchContainer {
        width: 100%;
        height: 10%;
        .searchInfoInput {
            width: 20%;
            padding-left: 1%;
        }
        .inputLabel {
            padding-left: 1%;
            font-weight: 700;
            font-size: 15px;
            color: #606266;
            //去除光标
            caret-color: transparent;
        }
        .searchButtonClass {
            margin-left: 1%;
        }
    }
    .deployStepContainer {
        margin: 1% 0.2% 0.2%;
        width: 98%;
        height: 80vh;
        .stepHeaderContainer {
            margin-left: 2%;
            width: 98%;
            height: 5%;
            background-color: #f5f7fa;
            display: flex;
            align-items: center;
            .stepInfoClass {
                width: 30%;
                display: flex;
                align-items: center;
                justify-content: center;
                .stepInfoIconClassSuccess {
                    font-size: 25px;
                    color: #069f06;
                }
                .stepInfoIconClassError {
                    font-size: 25px;
                    color: #ef0428;
                }
                .stepInfoIconClassCurrent {
                    font-size: 25px;
                }
                .stepInfoIconClassCommon {
                    font-size: 25px;
                    color: #a8abb2;
                }
                .stepInfoSpanClassSuccess {
                    padding-left: 2%;
                    color: #069f06;
                }
                .stepInfoSpanClassError {
                    padding-left: 2%;
                    color: #ef0428;
                }
                .stepInfoSpanClassCurrent {
                    padding-left: 2%;
                }
                .stepInfoSpanClassCommon {
                    padding-left: 2%;
                    color: #a8abb2;
                }
            }
            .stepSplitClass {
                width: 3%;
                display: flex;
                align-items: center;
                justify-content: center;
                .stepSplitClassSpan {
                    font-size: 20px;
                    color: #737070FF;
                }
            }
        }
        .stepInfoContainer {
            margin-top: 2%;
            margin-left: 2%;
            width: 98%;
            display: flex;
            .stepInfoClass {
                width: 30%;
                display: flex;
                .stepInfoIconClassSuccess {
                    font-size: 25px;
                    color: #069f06;
                }
                .stepInfoIconClassCurrent {
                    font-size: 25px;
                }
                .stepInfoIconClassCommon {
                    font-size: 25px;
                }
                .stepInfoSpanClassSuccess {
                    padding-left: 2%;
                    color: #069f06;
                }
                .stepInfoSpanClassCurrent {
                    padding-left: 2%;
                }
                .stepInfoSpanClassCommon {
                    padding-left: 2%;
                }
            }
            .stepSplitClass {
                width: 3%;
                display: flex;
                align-items: center;
                justify-content: center;
                .stepSplitClassSpan {
                    font-size: 40px;
                    color: #737070FF;
                }
            }
        }
    }
}

</style>